<template>
  <Container class="record">

    <TableHeaderSearch slot="header" :search-option="searchOption" :value="searchCondition" :click-back-fn="clickBackFn" @onSearch="onSearch" @onExport="onExport" />

    <Tabs>
      <TabPane label="领券记录">
        <Table stripe :height="options.tableHeight" :columns="receiveList.columns" :data="receiveList.data" no-data-text="亲，没有找到相关记录哦！~" />
        <div class="pager">
          <Page
            :total="receiveList.totalItem"
            :current="receiveList.currentPage"
            :page-size="receiveList.pageSize"
            show-sizer
            placement="top"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
          />
        </div>
        <Loader :status="receiveList.status" @refresh="onSearchBtnClick" />
      </TabPane>
    </Tabs>
  </Container>
</template>

<script>
import TableHeaderSearch from './components/TableHeaderSearch'
import receiveData from './list/CouponReceiveData'
import { formatDate, clearEmpty } from '@/util'
import table from '@/table'
export default {
  components: {
    TableHeaderSearch
  },
  data () {
    return {
      showEffectDialog: false,
      showInvalidDialog: false,
      options: {
        tableHeight: 300
      },
      receiveList: receiveData,
      searchOption: {
        showBackBtn: true,
        showExport: true,
        showStoreName: {
          value: true
        },
        showSelect: {
          value: true,
          placeholder: '选择搜索的选项'
        },
        showStatus: {
          value: true
        },
        showDate: {
          value: true,
          placeholder: '选择日期'
        }
      },
      searchCondition: {},
      couponId: this.$route.query.id,
      barcode: '', //绑定条码
      receiveId: '' //生效优惠券id
    }
  },
  watch: {
    $route () {
      let page = ~~this.$route.query.currentPage
      if (this.receiveList.currentPage !== page) {
        this.receiveList.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage
        this.getData()
      }
    }
  },
  mounted () {
    this.receiveList.currentPage = ~~this.$route.query.currentPage || 1
    this.receiveList.pageSize = ~~this.$route.query.pageSize || this.receiveList.pageSize
    this.initTable()
    this.getData()
  },
  methods: {
    ...table,
    getData () {
      let param = {
        size: this.receiveList.pageSize,
        current: this.receiveList.currentPage,
        couponId: this.couponId
      }
      Object.keys(this.searchCondition).forEach(key => {
        if (key === 'startDate') {
          param.beginReceiveDate = formatDate(this.searchCondition.startDate, true)
        } else if (key === 'endDate') {
          param.endReceiveDate = formatDate(this.searchCondition.endDate) + ' 23:59:59'
        } else {
          param[key] = this.searchCondition[key]
        }
      })
      this.receiveList.status = 'loading'
      param = clearEmpty(param)
      this.$ajaxGet('/coupon/coupon_receive/page', param).then(data => {
        data.records = data.records || []
        const statusMap = {
          PENDING_ACTIVATED: '待激活',
          USABLE: '可使用',
          USED: '已使用',
          INVALID: '已作废'
        }
        data.records.forEach(item => {
          item.statusStr = statusMap[item.status]
        })
        this.receiveList.data = data.records
        this.receiveList.totalItem = Number(data.total)
        this.backTableTop()
        this.receiveList.status = 'pass'
      }).catch(() => {
        this.receiveList.status = 'error'
      })
    },

    onSearch (data) {
      this.searchCondition = data
      this.receiveList.currentPage = 1
      this.getData()
    },

    onPageChange (number) {
      this.receiveList.currentPage = number
      this.$router.push({
        name: 'sales/coupon/record',
        query: {
          id: this.couponId,
          currentPage: number,
          pageSize: this.receiveList.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange (pageSize) {
      this.receiveList.currentPage = 1
      this.receiveList.pageSize = pageSize
      this.$router.push({
        name: 'sales/coupon/record',
        query: {
          id: this.couponId,
          currentPage: this.receiveList.currentPage,
          pageSize: this.receiveList.pageSize
        }
      })
      this.getData()
    },
    clickBackFn () {
      this.$router.replace({
        name: 'sales/coupon/list'
      })
    }
  }

}
</script>
